<template>
  <div class="full_div" >
    <!-- <img src="../../assets/full-screen.png" class="full_div_img" @click="fullHandler"/> -->
    <img :src="url" class="full_div_img" @click="fullHandler"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: null
    };
  },
  props: {
    url: {
      type: String,
      default: null
    }
  },
  watch: {
    // url() {
    //   this.imgUrl = this.url;
    // }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 全屏显示
    fullHandler() {
      // let element = document.documentElement;
      // if (element.requestFullscreen) {
      //   element.requestFullscreen();
      // } else if (element.webkitRequestFullScreen) {
      //   element.webkitRequestFullScreen();
      // } else if (element.mozRequestFullScreen) {
      //   element.mozRequestFullScreen();
      // } else if (element.msRequestFullscreen) {
      //   // IE11
      //   element.msRequestFullscreen();
      // }
      console.log("=================");
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
.full_div {
  width: 50px;
  height: 60px;

  .full_div_img {
    width: 20px;
    height: 20px;
    margin-top: 20px;
  }
}
.full_div:hover {
  background-color: lightgray;
}
.full_div:active {
  background-color: lavenderblush;
}
</style>
